<template>
  <render>
    <dialog ref="$dialog">
      <slot name="tooltip" />
      <!-- <button @click="handleClick">close</button> -->
    </dialog>
  </render>
</template>
<script setup>
import { h, ref, useSlots } from 'vue'
const $dialog = ref();

const slots = useSlots();
const render = (_, { slots: $slots }) =>
  slots.default().map(vnode => h(vnode, {
    style: { position: 'relative' },
    // onMousedown: () => {
    //   $dialog.value.style.top = $dialog.value.parentElement.offsetHeight + 5 + 'px';
    //   $dialog.value.show();
    // }
    onMouseenter: () => {
      $dialog.value.style.top = $dialog.value.parentElement.offsetHeight + 5 + 'px';
      $dialog.value.show();
    },
    onMouseleave: () => $dialog.value.close()
    // }))
  }, $slots.default));

// const handleClick = () => {
//   $dialog.value.close()
// }
</script>
<style scoped>
dialog {
  left: 0;
  margin: 0;
  font-size: initial;
  font-weight: initial;
  padding: 5px 10px;
  border: 1px solid gray;
  outline: none;
  border-radius: 4px;
  background-color: #fea;
}
</style>
<!-- <script setup>
import { h, ref, useSlots } from 'vue';
const $dialog = ref();

const slots = useSlots();
const render = (_, { slots: $slots }) =>
  slots.default().map(vnode => h(vnode, {
    style: { position: 'relative' },
    onMouseenter: () => {
      $dialog.value.style.top = $dialog.value.parentElement.offsetHeight + 5 + 'px';
      $dialog.value.show();
    },
    onMouseleave: () => $dialog.value.close()
  }, $slots.default));

</script>
<template>
  <render>
    <dialog ref="$dialog">
      <slot name="tooltip" />
    </dialog>
  </render>
</template>

<style scoped>
dialog {
  left: 0;
  margin: 0;
  font-size: initial;
  font-weight: initial;
  padding: 5px 10px;
  border: 1px solid gray;
  outline: none;
  border-radius: 4px;
  background-color: #fea;
}
</style> -->